<template>
	<basic-container>
		<avue-crud :option="option" :data="data" :page="page" v-model="form" ref="crud" @search-change="searchChange"
		 @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @row-update="rowUpdate"
		 @row-save="rowSave" @row-del="rowDel" @on-load="onLoad" :before-open="beforeOpen">
			<template slot-scope="scope" slot="menuForm">
				<el-button type="primary" icon="el-icon-check" :loading="loading" size="mini" @click="submit">提交</el-button>
			</template>
			<template slot="expand" slot-scope="{row}">
				<el-row :gutter="6" v-for="(item,index) in row.details" :key="index">
					<el-col :span="1"></el-col>
					<el-col :span="3">
						<el-tag size="mini">{{item.barCode}}</el-tag>
					</el-col>
					<el-col :span="2">
						订单数量：{{item.orderQty}}
					</el-col>
					<el-col :span="18">
						已处理：{{item.inQty}}
					</el-col>
				</el-row>
			</template>
			<template slot-scope="scope" slot="menu">
				<el-button type="text" size="mini" icon="el-icon-edit" v-if="scope.row.status==0" @click.stop="$refs.crud.rowEdit(scope.row,scope.index)">编辑</el-button>
				<el-button type="text" size="mini" icon="el-icon-delete" v-if="scope.row.status==0" @click.stop="$refs.crud.rowDel(scope.row)">删除</el-button>
			</template>
			<template slot="menuRight">
				<el-radio-group @change="searchReset" v-model="status" size="mini" style="margin-right: 50px;">
					<el-radio-button label="">所有</el-radio-button>
					<el-radio-button :label="item.value" v-for="(item,i) in statusItem" :key="i">{{item.label}}</el-radio-button>
				</el-radio-group>
			</template>
			<template slot="menuLeft">
				<el-button size="mini" type="primary" @click="downExcel">模版下载</el-button>
				<el-upload style="float:right;" action="action" :before-upload="beforeUpload" accept="application/vnd.ms-excel"
				 :show-file-list="false" :on-change="importXls">
					<el-button size="mini" type="primary">导入EXCEL</el-button>
				</el-upload>
			</template>
			<template slot-scope="{row}" slot="status">
				<el-tag v-for="(item,i) in statusItem" size="mini" :key="i" :type="item.type" v-if="item.value == row.status">{{item.label}}</el-tag>
			</template>
		</avue-crud>
	</basic-container>
</template>

<script>
	import request from '@/router/axios';

	export default {
		data() {
			return {
				type: '',
				loading: false,
				statusItem: [{
					value: 0,
					type: 'info',
					label: '暂存'
				}, {
					value: 1,
					type: '',
					label: '已提交'
				}, {
					value: 7,
					type: 'success',
					label: '已完成'
				}],
				status: "",
				form: {
					details: []
				},
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					expand: true,
					dialogDrag: true,
					searchMenuSpan: 4,
					border: true,
					index: true,
					viewBtn: false,
					editBtn: false,
					delBtn: false,
					refreshBtn: false,
					excelBtn: true,
					menuWidth: '120px',
					column: [{
							searchSpan:4,
							label: '订单号',
							prop: 'code',
							editDisplay: false,
							search: true,
							width: 120,
							placeholder: "非必填，可自动生成"
						},
						{
							label: '类型',
							prop: 'type',
							search: true,
							searchSpan:4,
							searchFilterable: true,
							filterable: true,
							clearable: false,
							width: 80,
							type: 'select',
							dicData: [],
							props: {
								label: 'name',
								value: 'sort'
							},
							rules: [{
								required: true,
								trigger: 'blur'
							}]
						},
						{
							label: '供应商',
							prop: 'supplier',
							searchSpan: 6,
							search: true,
							filterable: true,
							searchFilterable: true,
							clearable: false,
							width: 200,
							type: 'select',
							dicData: [],
							props: {
								label: 'name',
								value: 'code'
							},
							rules: [{
								required: true,
								trigger: 'blur'
							}]
						},
						{
							label: '采购组织',
							prop: 'organization',
							filterable: true,
							clearable: false,
							width: 200,
							type: 'select',
							dicData: [],
							props: {
								label: 'name',
								value: 'code'
							},
							rules: [{
								required: true,
								trigger: 'blur'
							}]
						},
						{
							label: '数量',
							prop: 'quantity',
							display: false,
							width: 80
						},
						{
							label: '备注',
							prop: 'remark',
							maxlength: 200
						},
						{
							label: '状态',
							prop: 'status',
							width: '80px',
							type: "radio",
							display: false,
							dicData: [],
							slot: true
						},
						{
							label: '创建时间',
							prop: 'createdOn',
							width: '120px',
							type: "date",
							format:'yyyy-MM-dd HH:mm',
							display: false
						},
						{
							label: "操作人",
							prop: "createdBy",
							width: "100px",
							display: false
						},
						{
							label: '详情',
							prop: 'details',
							type: 'dynamic',
							span: 24,
							children: {
								align: 'center',
								headerAlign: 'center',
								column: [{
										width: 200,
										label: '条码',
										prop: 'barCode',
										type: 'table',
										children: {
											searchMenuSpan: 6,
											border: true,
											column: [{
													label: '条码信息',
													prop: 'code',
													search: true,
													width: '150px'
												},
												{
													label: '物料名称',
													prop: 'name'
												},
												{
													label: '款号',
													prop: 'matnr'
												},
												{
													label: '颜色代码',
													prop: 'colorCode'
												},
												{
													label: '颜色',
													prop: 'colorName'
												},
												{
													label: '尺码',
													prop: 'size'
												},
												{
													label: '体积',
													type: 'number',
													prop: 'volume'
												},
												{
													label: '重量',
													type: 'number',
													prop: 'weight'
												}
											]
										},
										onLoad: ({
											page,
											value,
											data
										}, callback) => {
											//首次加载去查询对应的值
											if (value) {
												//this.$message.success('首次查询' + value);
												callback({
													code: value
												});
												return;
											}
											//分页查询信息
											this.request({
												url: '2/api/BaseProduct/getpages',
												params: {
													key: data == undefined ? '' : data.code,
													page: page.currentPage,
													limit: page.pageSize
												}
											}).then(res => {
												const data = res.data;
												callback({
													total: data.remark,
													data: data.data
												});
											});
										},
										props: {
											label: 'code',
											value: 'code'
										}
									},
									{
										width: 150,
										label: '数量',
										value:1,
										prop: 'orderQty',
										type: 'number'
									},
									{
										label: '备注',
										prop: 'remark'
									}
								]
							}
						}
					]
				},
				data: []
			};
		},
		created() {
			request({
				url: '/api/code/getCodes',
				params: {
					typeId: 'CODE201001'
				}
			}).then(res => {
				this.findObject(this.option.column, 'type').dicData = res.data.data;
			});
			request({
				url: '2/api/BaseSupplier/getpages',
				params: {
					limit: 0
				}
			}).then(res => {
				this.findObject(this.option.column, 'supplier').dicData = res.data.data;
			});
			request({
				url: '2/api/Baseorganization/getpages',
				params: {
					limit: 0
				}
			}).then(res => {
				this.findObject(this.option.column, 'organization').dicData = res.data.data;
			});
			this.findObject(this.option.column, 'status').dicData = this.statusItem;
		},
		methods: {
			beforeUpload() {
				return false;
			},
			importXls(file) {
				this.$export.xlsx(file.raw)
					.then(data => {
						if (data.header.indexOf('订单号') == -1 || data.header.indexOf('商品条码') == -1 || data.header.indexOf('数量') == -1) {
							this.$message({
								type: "error",
								message: "模板格式错误!"
							});
							return false;
						}
						this.list = data.results;
						if (this.list.length > 0) {
							let obj = {};
							obj.code = this.list[0].订单号;
							let details = [];
							for (let ele of this.list) {
								let i = this.list.indexOf(ele) + 1;
								if (ele.订单号.length == 0 || ele.商品条码.length == 0 || ele.数量.length == 0) {
									this.$message({
										type: "error",
										message: "第 " + i + " 行数据不能为空!"
									});
									return false;
								}
								if (obj.code != ele.订单号) {
									this.$message({
										type: "error",
										message: "第 " + i + " 行不是同一订单号!"
									});
									return false;
								}
								if (isNaN(ele.数量)) {
									this.$message({
										type: "error",
										message: "第 " + i + " 行数量不是数值型!"
									});
									return false;
								}
								var v = {};
								v.orderCode = ele.订单号;
								v.barCode = ele.商品条码;
								v.orderQty = ele.数量;
								details.push(v);
							}
							obj.details = details;
							request({
								url: '2/api/OrderIn/add',
								method: 'post',
								data: obj
							}).then((res) => {
								if (res.data.code == 200) {
									this.searchReset();
								}
							});
						}
					})
			},
			downExcel() {
				window.open('/cdn/orderIn.xls')
			},
			beforeOpen(done, type) {
				this.type = type;
				if (['edit'].includes(type)) {
					request({
						url: '2/api/OrderIn/detail',
						params: {
							id: this.form.code
						}
					}).then(res => {
						this.form = res.data.data;
					});
				}
				done();
			},
			submit() {
				this.form.status = 1;
				if (this.type == "add") {
					this.$refs.crud.rowSave();
				} else if (this.type == "edit") {
					this.$refs.crud.rowUpdate();
				}
			},
			rowSave(row, loading, done) {
				for (let ele of row.details) {
					if (isNaN(ele.orderQty) || ele.orderQty < 1) {
						this.$message({
							type: "error",
							message: ele.barCode + " 数量不正确!"
						});
						done();
						return false;
					}
				}
				if (row.status == null || row.status== ''){
					row.status = 0;
				}
				this.loading = true
				request({
					url: '2/api/OrderIn/add',
					method: 'post',
					data: row
				}).then(
					() => {
						loading();
						this.loading = false;
						this.onLoad(this.page);
						done();
					},
					() => {}
				);
			},
			rowUpdate(row, index, loading, done) {
				for (let ele of row.details) {
					if (isNaN(ele.orderQty) || ele.orderQty < 1) {
						this.$message({
							type: "error",
							message: ele.barCode + " 数量不正确!"
						});
						done();
						return false;
					}
				}
				this.loading = true
				return request({
					url: '2/api/OrderIn/edit',
					method: 'post',
					data: row
				}).then(
					() => {
						loading();
						this.loading = false;
						this.onLoad(this.page);
						done();
					},
					() => {}
				);
			},
			rowDel(row) {
				this.$confirm('确定数据删除?')
					.then(() => {
						return request({
							url: '2/api/OrderIn/remove',
							method: 'post',
							params: {
								id: row.id
							}
						});
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				request({
					url: '2/api/OrderIn/pages',
					params: {
						key: this.query.code == undefined ? '' : this.query.code,
						type: this.query.type == undefined ? '' : this.query.type,
						status: this.status == undefined ? '' : this.status,
						where: this.query.supplier == undefined ? '' : this.query.supplier,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data;
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
	#subTable .avue-crud__pagination {
		position: relative;
		padding: 0px 0 0px 20px;
		text-align: right;
	}
</style>
